<template>
    <div class="my-section">
      <div class="title-area">
        <van-nav-bar
          title="个人信息"
          left-text=""
          right-text=""
          left-arrow
          @click-left="onClickLeft"
        />
        <div class="my-area-con">
          <van-card
            :title="user.username"
            :thumb="user.avatar"
          >
           <template #tags v-if="user.roles" style="margin:10px 0 0 0">
              <van-tag plain type="danger" v-for="item in user.roles" :key="item.id">
                  {{item.name}}
              </van-tag>
           </template>
           <template #bottom>
              <span>当前角色：{{currentRoleName()}}</span>
           </template>
          </van-card>
          <van-cell-group>
          <van-cell title="姓名" :value="user.username" />
          <van-cell title="性别" :value="user.sex === 2 ? '女':'男'"  />
          <van-cell title="手机号码" :value="user.mobile" />
          <van-cell title="电子邮箱" :value="user.email" />
        </van-cell-group>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant'
  import { mapGetters } from 'vuex'
  import { updateUserDefaultRole, getUserProfile } from '@/api/system/user'
  import { listSimpleRoles } from '@/api/system/role'
  export default {
    name: "Message",
    data() {
      return {
        show:false,
        show: false,
        actions: [
          { name: '选项一' },
          { name: '选项二' },
          { name: '选项三', subname: '描述信息' },
        ],
        user: {},
        roleGroup: {},
        roleOptions: []
      };
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'avatar',
        'nickname',
        'device',
        'roles',
        'currentRoleId'
      ])
    },
    created() {
      this.getUser();
      this.listSimpleRoles()
    },
    methods: {
      onClickLeft() {
          this.$router.go(-1)
      },
      getUser() {
        getUserProfile().then((response) => {
          this.user = response.data;
        });
      },
      currentRoleName() {
          return this.roleOptions.filter((item) => this.currentRoleId === item.id)?.[0]?.name
      },
      updateUserDefaultRole(roleId) {
        updateUserDefaultRole(roleId).then(() => {
          Toast("切换用户角色成功")
          //更新角色权限
          this.$store.dispatch('getUserInfo')
        })
      },
       // 获得角色列表 TODO 后续需优化 加载一次后面其他地方也使用
       listSimpleRoles() {
        listSimpleRoles().then((response) => {
          // 处理 roleOptions 参数
          this.roleOptions = []
          // this.roleOptions.push(...response.data)
          this.roleOptions = response.data.filter((item) =>
            this.roles.includes(item.code)
          )
        })
      },
      onSelect(item){
          this.show = false
          this.updateUserDefaultRole(item.id)
      }
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  